<!--
 * @Description: 
 * @Author: chendingfengmail@163.com
 * @Date: 2022-01-11 13:47:07
 * @LastEditTime: 2022-01-12 09:51:51
 * @LastEditors: chendingfengmail@163.com
 * @Reference: 
-->
<!--  -->
<template>
  <el-dialog
    :title="titleName"
    width="60%"
    center
    :visible.sync="visible"
    :before-close="modalClose"
    @open="modelOpen"
    :close-on-click-modal="false"
    append-to-body>
    <el-input v-model="mapInfo.address" placeholder="请输入内容" id="tipInput"></el-input>
    <div class="map-container">
      <dd-map-location :tipInputId="'tipInput'" @getLocationInfo="getLocationInfo"></dd-map-location>
      <p>标记点：{{ mapInfo.address }}，经度：{{ mapInfo.lnglat[0] }}，纬度：{{ mapInfo.lnglat[1] }}</p>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="confirm">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  name: '',
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    onConfirm: {
      type: Function,
      default: function (mapInfo) {
        return null;
      }
    },
    modelData: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      titleName: '详情',
      formLabelWidth: '100px',
      mapInfo: {
        address: '佛山市禅城区人民政府',
        lnglat: [113.122532, 23.009475],
      },
    };
  },

  components: {},

  computed: {},

  mounted() {},

  methods: {
    // 对话框打开
    modelOpen() {
      console.log('对话框打开');
    },

    getLocationInfo(locationInfo) {
      this.mapInfo = locationInfo
    },

    // 提交位置
    confirm() {
      this.onConfirm(this.mapInfo);
      this.modalClose();
    },
    
    // 对话框关闭
    modalClose() {
      this.$emit('update:visible', false); // 直接修改父组件的属性
    },
  },
};
</script>

<style lang='scss'>
.map-container {
  height: 500px;
  width: 100%;
}
.amap-sug-result {
  z-index: 9999;
}
</style>